<!--
 * @Descripttion: 查看考试计划
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-05-19 10:58:12
 * @LastEditTime: 2021-06-10 16:16:54
 * @FilePath: \cscec-pms-admin\src\views\partyMasses\partyManage\examinationPlan\detail.vue
-->
<template>
  <base-breadcrumb class="UpdateStudyEduc-container">
    <a-spin :spinning="loading">
      <a-card :bordered="false">
        <title-name title="基础信息" />
        <custom-form
          ref="form"
          :is-validate="true"
          :edit-model="''"
          :form="form"
          :form-list="formOption"
        />
        <title-name title="参考人员信息" />
        <!-- 搜索 -->
        <a-form-model
          ref="searchForm"
          :model="searchForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-model-item
                label="党员名称"
                prop="planMemberName"
              >
                <base-input
                  v-model="searchForm.planMemberName"
                  placeholder="请输入"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item
                label="参考情况"
                prop="planMemberState"
              >
                <a-select
                  v-model="searchForm.planMemberState"
                  placeholder="请选择"
                >
                  <a-select-option
                    v-for="{ value, name } in depend.statusList"
                    :key="value"
                    :value="value"
                  >
                    {{ name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-button
                type="primary"
                @click="handleSearch"
              >
                搜索
              </a-button>
              <a-button
                style="margin-left:8px;"
                @click="handleReset"
              >
                重置
              </a-button>
            </a-col>
          </a-row>
        </a-form-model>
        <!-- 搜索 -->
        <!-- 表格 -->
        <s-table
          ref="table"
          size="default"
          row-key="partyMemberId"
          :columns="columns"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :scroll="{ y: 600 }"
        >
          <span
            slot="operator"
            slot-scope="text,record"
          >
            <template>
              <a @click="handlePaperDetail(record)">查看考卷</a>
            </template>
          </span>
        </s-table>
        <!-- 表格 -->
      </a-card>
      <div class="tool-btns page-btn-right-top">
        <a-button
          class="ml12"
          type="default"
          @click="handleClose"
        >
          关闭
        </a-button>
      </div>
    </a-spin>
  </base-breadcrumb>
</template>
<script>
import { STable } from '@/components'
import { queryExamPaperList, getExamPlanById, queryPlanMemberList } from '@/api/partyMasses/partyManage/examinationPlan'
export default {
  name:'a'+ Date.now(),
  // name: 'Detail',
  components: {
    STable
  },
  data() {
    return {
      //页面加载
      loading: false,
      // 表单
      form: {
        people: 0
      },
      // 参考人员列表
      people: [],
      // 依赖数据
      depend: {
        examPaperId: [],
        statusList: [
          {
            value: 0,
            name: '未参考'
          },
          {
            value: 1,
            name: '已参考'
          }
        ]
      },
      // 搜索表单
      searchForm: {},
      // 表单布局
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      // 表头
      columns: [
        {
          title: '序号',
          width: '80px',
          align: 'center',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '党员名称',
          dataIndex: 'partyMemberName',
          key: 'partyMemberName',
          align: 'center'
        },
        {
          title: '参加考试情况',
          dataIndex: 'stateName',
          key: 'stateName',
          align: 'center'
        },
        {
          title: '参考时间',
          dataIndex: 'startTime',
          key: 'startTime',
          align: 'center'
        },
        {
          title: '得分',
          dataIndex: 'score',
          key: 'score',
          align: 'center'
        },
        {
          title: '所属党支部',
          dataIndex: 'partyOrgName',
          key: 'partyOrgName'
        },
        {
          title: '员工编号',
          dataIndex: 'employeeNum',
          key: 'employeeNum',
          align: 'center'
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
          key: 'phone',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operator',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'operator' }
        }
      ]
    }
  },
  computed: {
    // 表单配置
    formOption() {
      return [
        {
          label: '考试计划名称',
          keyName: 'name',
          type: 'BaseInput',
          disabled: true
        },
        {
          label: '考卷名称',
          keyName: 'examPaperId',
          type: 'a-select',
          disabled: true,
          data: this.depend.examPaperId
        },
        {
          label: '考卷总分',
          keyName: 'totalScore',
          type: 'BaseInput',
          disabled: true
        },
        {
          label: '计划开始时间',
          keyName: 'startTime',
          type: 'a-date-picker',
          disabled: true,
          attrs: {
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            disabledDate: this.disabledStartDate,
            showTime: { format: 'YYYY-MM-DD HH:mm:ss' }
          }
        },
        {
          label: '计划结束时间',
          keyName: 'endTime',
          type: 'a-date-picker',
          disabled: true,
          attrs: {
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            disabledDate: this.disabledEndDate,
            showTime: { format: 'YYYY-MM-DD HH:mm:ss' }
          }
        },
        {
          label: '创建人',
          keyName: 'creatorName',
          type: 'BaseInput',
          disabled: true
        },
        {
          label: '创建时间',
          keyName: 'createTime',
          type: 'BaseInput',
          disabled: true
        },
        {
          label: '考试人数',
          keyName: 'totalMembers',
          type: 'BaseInput',
          disabled: true
        }
      ]
    }
  },
  async created() {
    await this.getSearchData()
    this.getData()
  },
  methods: {
    /**
     * @description: 获取依赖数据
     * @param {Void}
     * @return {Promise} 接口Promise
     */
    async getSearchData() {
      try {
        queryExamPaperList({ examPaperName: '' })
          .then(({ data }) => {
            this.depend.examPaperId = data.map((el) => {
              return {
                label: el.name,
                value: el.id,
                totalScore: el.totalScore
              }
            })
          })
          .catch((error) => {
            console.log(error)
          })
      } catch (error) {
        console.log(error)
        return Promise.reject(error)
      }
    },
    /**
     * @description: 搜索参考人员
     * @param {Void}
     * @return {Void}
     */
    handleSearch() {
      this.$refs.table.refresh(true)
    },
    /**
     * @description: 重置参考人员
     * @param {Void}
     * @return {Void}
     */
    handleReset() {
      this.searchForm = {}
      this.$refs.table.refresh(true)
    },
    /**
     * @description: 表格数据加载方法
     * @param {Object} parameter 分页信息
     * @return {Promise} 接口Promise
     */
    async loadData(parameter) {
      try {
        const params = Object.assign({}, parameter, {
          query: {
            ...this.searchForm,
            examPlanId: this.$route.query.id
          }
        })
        const { data, currentPage, totalSize } = await queryPlanMemberList(params)
        this.total = totalSize
        return Promise.resolve({
          data,
          currentPage,
          totalSize
        })
      } catch (error) {
        console.log(error)
        return Promise.reject(error)
      }
    },
    /**
     * @description: 获取考试计划信息
     * @param {Void}
     * @return {Void}
     */
    getData() {
      this.loading = true
      getExamPlanById({
        id: this.$route.query.id
      })
        .then(({ data }) => {
          this.form = data
        })
        .catch((error) => {
          console.log(error)
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * @description: 关闭
     * @param {Void}
     * @return {Void}
     */
    handleClose() {
      this.$close()
    },
    /**
     * @description: 查看考卷
     * @param {Void}
     * @return {Void}
     */
    handlePaperDetail(record) {
      this.$router.push({
        path: '/partyMasses/partyManage/examinationPlan/paper',
        query: {
          id: record.partyMemberId,
          examPlanId: this.$route.query.id,
          pageType: 'detail'
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>

